import React, { useEffect, useState } from 'react'
import { getUserList } from '../../api/user'
import { Table } from 'antd'
export default function Index() {

    // const userList = useUserList()

    const [userList, setUserList] = useState([])

    // 创建一个当前页码
    const [current, setCurrent] = useState(1)

    useEffect(() => {
        getUserList().then(res => {
            setUserList(res.data)
        })
    }, [])

    const columns = [
        {
            title: '序号',
            dataIndex: 'telcode',
            render: (text, record, index) => {
                /*
                    render 是用来渲染复杂数据用的，类似于插槽用法
                    text: 当前列的值，如果 dataIndex 有设置那么就是 dataIndex 字段的值，如果没有设置
                          那么就是当前对象
                    record: 表示当前对象的所有内容
                    index: 当前索引值
                */

                // console.log(text, record, index);
                return <span>{(current - 1) * 10 + index + 1}</span>
            }
        },
        {
            title: '名称',
            dataIndex: 'telcode',
        },
        {
            title: '手机号',
            dataIndex: 'tel',
        },
        {
            title: '用户id',
            dataIndex: 'userid',
        },
    ];

    return (
        <div>
            <h2>用户列表</h2>

            <Table
                pagination={{
                    current,
                    onChange(page, pageSize) {
                        // 记录当前被点击的页码
                        setCurrent(page)
                    }
                }}
                rowKey='userid'
                dataSource={userList}
                columns={columns} />


        </div>
    )
}
